<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CustomerBxsliderUI</title>
    <!--<link rel="stylesheet" href="../bower_components/bxslider-4/jquery.bxslider.css"/>-->
    <script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="../bower_components/bxslider-4/jquery.bxslider.min.js"></script>
    <script type="text/javascript">

        $(function(){
            $(".custom_slider-ctn ul").bxSlider({
                nextSelector: '#next',
                prevSelector: '#prev',
                nextText: '',
                prevText: ''
            });
        });
    </script>
    <style>
        .custom_slider-ctn{
            position: relative;
        }

        .custom_slider-ctn .bx-pager{
            display: none;
        }

        .custom_slider-ctn .prev,
        .custom_slider-ctn .next{
            width: 94px;
            height: 94px;
            border-radius: 50%;
            top: 50%;
            margin-top: -47px;
            position: absolute;
            color: transparent;
            display: inline-block;
        }

        .custom_slider-ctn .prev a,
        .custom_slider-ctn .next a{
            display: inline-block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #333;
            opacity: .8;
        }

        .custom_slider-ctn .prev{
            left: 0;
        }

        .custom_slider-ctn .prev a:before,
        .custom_slider-ctn .prev a:after,
        .custom_slider-ctn .next a:before,
        .custom_slider-ctn .next a:after{
            content: "";
            display: inline-block;
            border-width:30px ;
            border-style: solid;
            position: absolute;
            top: 17px;
        }

        .custom_slider-ctn .prev a:before{
            border-color: transparent #fff transparent transparent;
            left: 0;
        }

        .custom_slider-ctn .prev a:after{
            border-color: transparent #333 transparent transparent;
            left: 2px;
        }

        .custom_slider-ctn .next a:before{
            border-color: transparent transparent transparent #fff;
            right: 0;
        }

        .custom_slider-ctn .next a:after{
            border-color: transparent transparent transparent #333;
            right: 2px;
        }

        .custom_slider-ctn .next{
            right: 0;
        }
    </style>
</head>
<body>
<div class="custom_slider-ctn">
    <ul>
        <li>
            <img src="../public/slide/banner1.png"/>
        </li>
        <li>
            <img src="../public/slide/banner2.png"/>
        </li>
        <li>
            <img src="../public/slide/banner3.png"/>
        </li>
        <li>
            <img src="../public/slide/banner4.png"/>
        </li>
    </ul>
    <span id='prev' class='prev'></span>
    <span id='next' class='next'></span>
</div>
</body>
</html>